<template>
  <div class="container">
    <div class="logo"></div>
    <div class="form">
      <el-card class="card-box">
        <div class="login-title"></div>
        <el-form
          class="ruleForm"
          :model="loginForm"
          ref="loginForm"
          :rules="loginRules"
        >
          <el-form-item prop="telephone">
            <el-input
              v-model="loginForm.telephone"
              type="text"
              placeholder="请输入手机号码"
              prefix-icon="el-icon-mobile-phone"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              show-password
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item class="vCode" prop=" Vcode">
            <el-input
              type="text"
              placeholder="验证码"
              style="width: 160px"
              v-model="loginForm.Vcode"
            ></el-input>
            <img :src="Vcode" alt="image" @click="refreshVcode" />
          </el-form-item>
          <el-form-item class="about-pass">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
            <span style="cursor: pointer;" @click="dialogVisible = true">忘记密码</span>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              size="small"
              style="width: 300px; height: 35px"
              @click="login"
              >立即登录</el-button
            >
          </el-form-item>
        </el-form>
        <div class="reg" @click="$router.push('/registry')">
          <span>没有账号？立即注册</span>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="忘记密码"
      :visible.sync="dialogVisible"
      width="25%"
      :before-close="handleClose"
    >
      <el-form size="mini" :model="resetForm" :rules="resetPassRules" ref="resetForm">
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="resetForm.email" type="email"></el-input>
        </el-form-item>
        <el-form-item label="邮箱验证码" prop="Vcode">
            <el-input v-model="resetForm.Vcode" type="text"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="sendForgetCode" :disabled="disabledbtn">{{ second===totalSecond? '获取验证码' :second+'秒后重新发送' }}</el-button>
            <el-button type="primary" @click="resetPassword">确认重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          >确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { getForgetCode } from '@/api/common'
import { forgetPassword } from '@/api/user'
export default {
  components: {},
  name: 'LoginIndex',
  created () {},
  data () {
    return {
      disabledbtn: false,
      timer: '',
      second: 10,
      totalSecond: 10,
      dialogVisible: false,
      Vcode: 'http://localhost:8080/api/Vcode',
      imgUrl: 'http://localhost:8080/api/Vcode',
      checked: true,
      loginForm: {
        telephone: '',
        password: '',
        Vcode: ''
      },
      loginRules: {
        telephone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不对',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '密码长度应该为6-16位之间',
            trigger: 'blur'
          }
        ],
        Vcode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      resetForm: {
        email: '',
        Vcode: ''
      },
      resetPassRules: {
        email: [
          {
            required: true,
            message: '请输入邮箱地址',
            trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: '邮箱地址格式不对',
            trigger: 'blur'
          }
        ],
        Vcode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      }

    }
  },
  methods: {
    login () {
      this.$refs.loginForm.validate(async (value) => {
        if (value) {
          await this.$store.dispatch('user/loginAction', this.loginForm)
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          this.$router.push('/')
        }
      })
    },
    refreshVcode () {
      this.Vcode = this.imgUrl + '?' + new Date().getTime()
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 发送验证码
    sendForgetCode () {
      if (!this.resetForm.email) {
        this.$message({
          message: '请输入邮箱地址',
          type: 'warning'
        })
        return false
      }
      if (!this.timer && this.second === this.totalSecond) {
        this.disabledbtn = true
        this.getForgetCode()
        this.timer = setInterval(() => {
          this.second--
          if (this.second < 1) {
            clearInterval(this.timer)
            this.timer = null
            this.second = this.totalSecond
            this.disabledbtn = false
          }
        }, 1000)
      }
    },
    // 发送验证码接口
    async getForgetCode () {
      // console.log(this.resetPassForm.email)
      const res = await getForgetCode(this.resetForm.email)
      this.$message(
        {
          message: res,
          type: 'success'
        }
      )
    },
    // 重置密码
    resetPassword () {
      // console.log(this.resetForm.email, this.resetForm.Vcode)
      this.$refs.resetForm.validate(async (value) => {
        console.log(value)
        if (value) {
          this.forgetPassword()
          this.dialogVisible = false
        }
      })
    },
    // 重置密码接口
    async forgetPassword () {
      const res = await forgetPassword(this.resetForm.email, this.resetForm.Vcode)
      this.$message({
        type: 'success',
        message: res
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .logo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex: 3;
    padding: 0 100px;
    background: url(../../assets/login-logo.jpg) no-repeat center;
    background-size: 512px;
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    .card-box {
      height: 440px;
      border: none;
      padding: 0;
      .login-title {
        width: 100%;
        height: 50px;
        margin-bottom: 30px;
        text-align: center;
        background: url(../../assets/login-title.jpg) no-repeat;
        background-size: cover;
      }
      .el-form-item {
        .el-input {
          width: 300px;
          height: 30px;
        }
      }
      .about-pass {
        .el-checkbox {
          margin: 0 160px 0 2px;
          color: #909399;
        }
        span {
          color: #909399;
        }
      }
      .vCode {
        display: flex;
        align-items: center;
        img {
          margin-left: 20px;
          height: 40px;
          vertical-align: middle;
        }
      }
      .reg {
        text-align: center;
        font-size: 12px;
        color: #23a8f2;
        cursor: pointer;
      }
    }
  }
}
</style>
